<template>
  <div class="main-container">
    <!-- 背景装饰元素 -->
    <div class="decoration decoration-1"></div>
    <div class="decoration decoration-2"></div>
    <div class="decoration decoration-3"></div>

    <!-- 导航组件 -->
    <NavBar/>

    <!-- 内容区域 - 替换为路由视图 -->
    <router-view ></router-view>
  </div>
</template>

<script setup lang="ts">
import NavBar from '../components/NavBar.vue'


</script>

<style scoped>
.main-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #f5f7fa;
  overflow: hidden;
}

.decoration {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.decoration-1 {
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
  opacity: 0.2;
}

.decoration-2 {
  bottom: -150px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  opacity: 0.15;
}

.decoration-3 {
  top: 40%;
  right: 10%;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #d4fc79, #96e6a1);
  opacity: 0.1;
}
</style>